{% extends 'shippingcart/base_shopcart.html' %}
{% load static %}
{% block shopcart %}
	<!-- 顶部标题 -->
	<div class="bgf5 clearfix">
		<div class="top-user">
			<div class="inner">
				<a class="logo" href="{% url 'goods:index' %}" style="background-image: url({% static 'logo.jpg' %});border-radius: 50%;background-position: center;"></a>
				<div class="title">购物车</div>
			</div>
		</div>
	</div>
	<div class="content clearfix bgf5">
		<section class="user-center inner clearfix">
			<div class="user-content__box clearfix bgf">
				<div class="title">购物车</div>
				<form action="{% url 'shippingcart:udai_cart_ack' %}" class="shopcart-form__box" method="post">
					{% csrf_token %}
                    <table class="table table-bordered">
						<thead>
							<tr>
								<th width="150">
									<label class="checked-label"><input type="checkbox" class="check-all"><i></i> 全选</label>
								</th>
								<th width="300">商品信息</th>
								<th width="150">单价</th>
								<th width="200">数量</th>
								<th width="200">现价</th>
								<th width="80">操作</th>
							</tr>
						</thead>
						<tbody>
							{% for foo in  data%}

                                <tr>
								<th scope="row" class="acti">
									<label class="checked-label"><input type="checkbox" name="sku_id" value={{ foo.goods.id }}><i></i>
										<div class="img"><img src={{ foo.goods.image }} alt="" class="cover"></div>
									</label>
								</th>
								<td>
									<div class="name ep3" >{{ foo.goods.name }}</div>

                                    <div class="type c9">颜色分类：{{ foo.color }}  尺码：{{ foo.size }}</div>
								</td>
								<td >¥{{ foo.goods.price }}</td>
								<td class="msg">
									<div class="cart-num__box">
										<input type="button" class="sub" value="-">
                                        <input type="hidden" class='price' value={{ foo.goods.price }}>
										<input type="text" class="val" value={{ foo.num }} maxlength="2">
                                        <input type="hidden" class="selected" value={{ foo.goods.id }}>
										<input type="button" class="add" value="+">
									</div>
								</td>
								<td>¥{{ foo.goods.price }}</td>
								<td class="btn_del"><a href="#">删除</a></td>
							</tr>
							{% endfor %}


						</tbody>
					</table>
					<div class="user-form-group tags-box shopcart-submit pull-right">
						<button type="submit" class="btn">提交订单</button>
					</div>
					<div class="checkbox shopcart-total">
						<label><input type="checkbox" class="check-all"><i></i> 全选</label>
						&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<a href="#" class="delcart">删除</a>
						<div class="pull-right">
							已选商品 <span>0</span> 件
							&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;合计（不含运费）
							<b class="cr">¥<span class="fz24">0</span></b>
						</div>
					</div>
					<script>
						$(document).ready(function(){
							var $item_checkboxs = $('.shopcart-form__box tbody input[type="checkbox"]'),
								$check_all = $('.check-all');
							var csrf = $("input[name='csrfmiddlewaretoken']").val();
							// 全选
                            var flag1 = true;
                            $check_all.on('change', function() {
								$check_all.prop('checked', $(this).prop('checked'));
								$item_checkboxs.prop('checked', $(this).prop('checked'));
								if (flag1){
								    flag1 = false;
								    $('.acti').addClass('addsku')


                                }else{
								    $('.acti').removeClass('addsku')
                                    flag1 = true;
                                }
                                sum()



							});
							// 点击选择
							$item_checkboxs.on('change', function() {
								var flag = true;
								$(this).parent().parent('th').addClass('addsku');
								$item_checkboxs.each(function() {

                                    if (!$(this).prop('checked')) {
									    flag = false;

                                        $(this).parent().parent('th').removeClass('addsku')
                                    }
								});
								$check_all.prop('checked', flag);
								sum()
                            });
							// 个数限制输入数字
							$('input.val').onlyReg({reg: /[^0-9.]/g});
							// 加减个数
							$('.cart-num__box').on('click', '.sub,.add', function() {
								var value = parseInt($(this).siblings('.val').val());
								if ($(this).hasClass('add')) {
									$(this).siblings('.val').val(Math.min((value += 1),99));
								} else {
									$(this).siblings('.val').val(Math.max((value -= 1),1));
								}
								var sku_id = $(this).siblings('.selected').val();
								var num = $(this).siblings('.val').val();
								var csrf = $("input[name='csrfmiddlewaretoken']").val();
                                console.log(sku_id,num);
                                    $.ajax({
                                        type:'POST',
                                        url:"/shippingcart/udai_check/",
                                        data:{'csrfmiddlewaretoken':csrf, "sku_id":sku_id,'number':num},

                                        success:function(msg){
                                            console.log('返回结果:'+msg)
                                            var obj = eval('(' + msg+ ')');
                                            {#var obj = JSON.stringify(msg)#}
                                            {#var obj = msg.toJSON;#}

                                            console.log(obj.message)

                                            if (obj.message === '更改成功') {
                                                console.log(obj.message)

                                            }else {
                                                console.log('返回结果:'+msg.errmsg)
                                            }
                                        },
                                        error:function(resp){
                                            console.log("Error: "+resp.status);
                                            alert('请求后台失败!')
                                        }
                                    })
							});
							//统计
                            function totals(){
                                var num=0;

                                $(".addsku").each(function(index,item){
                                    num += ($(item).siblings(".msg").find(".val").val())*$(item).siblings(".msg").find("div").find('.price').val();
                                    var price = $(item).siblings(".msg").find(".val").val();
                                    var number = $(item).siblings(".msg").find("div").find('.price').val();

                                });



                                return num
                            }
                            function sum(){
                                $(".pull-right span").text($(".addsku").size());
                                $(".pull-right b span").text(totals())

                            }
	                    {#//删除购物车#}
                            $('.delcart').on('click', function() {
                                var b = $(".acti").parent();

                                      $.ajax({
                                        type:'POST',
                                        url:"http://127.0.0.1:8000/shippingcart/udai_delcart/",
                                        data:{'csrfmiddlewaretoken':csrf, "sku_id":'all'},

                                        success:function(msg){
                                            console.log('返回结果:'+msg);
                                            var obj = eval('(' + msg+ ')');
                                            {#var obj = JSON.stringify(msg)#}
                                            {#var obj = msg.toJSON#}
                                            console.log('返回结果:'+obj);
                                            if (obj.message ==='删除成功') {
                                                console.log('返回结果:'+obj.message);
                                                b.remove()


                                            }else {
                                                console.log('返回结果:'+obj.errmsg)
                                            }
                                        },
                                        error:function(resp){
                                            console.log("Error: "+resp.status);
                                            alert('请求后台失败!')
                                        }
                                    })
                            });
                                $('.btn_del').on('click', function() {
                                var sku_id = $(this).siblings(".msg").find('.selected').val();
                                var b = $(this).parent();
                                console.log(sku_id);
                                      $.ajax({
                                        type:'POST',
                                        url:"http://127.0.0.1:8000/shippingcart/udai_delcart/",
                                        data:{'csrfmiddlewaretoken':csrf, "sku_id":sku_id},

                                        success:function(msg){
                                            console.log('返回结果:'+msg);
                                            var obj = eval('(' + msg+ ')');
                                            {#var obj = JSON.stringify(msg)#}
                                            {#var obj = msg.toJSON#}
                                            console.log('返回结果:'+obj);
                                            if (obj.message ==='删除成功') {
                                                b.remove()

                                            }else {
                                                console.log('返回结果:'+obj.errmsg)
                                            }
                                        },
                                        error:function(resp){
                                            console.log("Error: "+resp.status);
                                            alert('请求后台失败!')
                                        }
                                    })
                            })


						});


					</script>
				</form>
			</div>
		</section>
	</div>
{% endblock %}
